// pages/distribution/components/ProductSection.vue
<template>
  <view class="product-section ss-p-x-20 ss-p-y-20 ss-radius-20">
    <view class="top">
      <image :src="topImage" />
      <view v-if="showTopTitle" class="top-title ss-c-c">
        <image class="top-img" :src="topTitleImage" />
        <view>{{ topTitleText }}</view>
      </view>
    </view>
    <view class="content">
      <view class="content-item" v-for="item in items" :key="item.id">
        <view class="img"><image class="product-img" :src="item.image" mode=""></image></view>
        <view class="content-item-price">￥{{ item.price[0] }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  // Top banner image
  topImage: {
    type: String,
    required: true
  },
  // Whether to show the title section with icon
  showTopTitle: {
    type: Boolean,
    default: false
  },
  // Title section icon
  topTitleImage: {
    type: String,
    default: ''
  },
  // Title text
  topTitleText: {
    type: String,
    default: ''
  },
  // Product items to display
  items: {
    type: Array,
    required: true
  }
})
</script>

<style lang="scss" scoped>
.product-section {
  background:  url('https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250418/c81181f821fdd4ad66ed2ad737a93e08.png') no-repeat center center;
  background-size: 100% 100%;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    & > image {
      width: 232rpx;
      height: 30rpx;
    }
    &-title {
      background-color: #E63D32;
      border-radius: 100rpx;
      padding: 6rpx 16rpx;
      & > image {
        width: 30rpx;
        height: 30rpx;
        margin-right: 6rpx;
      }
      & > view {
        font-size: 24rpx;
        color: #fff;
        font-weight: 400;
      }
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    gap: 26rpx;
    padding-bottom: 10rpx;
    .content-item {
      flex: 1;
      text-align: center;
      .img {
        width: 100%;
        height: 150rpx;
        background-color: #D8D8D8;
        margin: 10rpx 0;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .content-item-price {
        font-size: 30rpx;
        color: #FF0505;
        font-weight: 500;
      }
    }
  }
}
.list-card2 {
  display: flex;
  justify-content: space-between;
  gap: 26rpx;
  margin-top: 10rpx;
  .list-supplier, .list-hot {
    flex: 1;
  }
  .content {
    .content-item {
      .img {
        height: 140rpx;
      }
      
    }
  }
}
</style>